<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
defineOptions({
  name: "Welcome"
});

const chart1Ref = ref();
const chart2Ref = ref();
const chart3Ref = ref();
const chart4Ref = ref();

onMounted(() => {
  const chart1 = echarts.init(chart1Ref.value);
  chart1.setOption({
    title: { text: "房型入住率", left: "center" },
    tooltip: { trigger: "item" },
    series: [
      {
        name: "房型",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "大床房" },
          { value: 735, name: "双床房" },
          { value: 580, name: "家庭房" },
          { value: 484, name: "套房" }
        ]
      }
    ]
  });

  const chart2 = echarts.init(chart2Ref.value);
  chart2.setOption({
    title: { text: "月度收入趋势" },
    tooltip: {},
    xAxis: { data: ["1月", "2月", "3月", "4月", "5月"] },
    yAxis: {},
    series: [
      {
        name: "收入",
        type: "bar",
        data: [50000, 60000, 80000, 75000, 90000]
      }
    ]
  });

  const chart3 = echarts.init(chart3Ref.value);
  chart3.setOption({
    title: { text: "每日入住人数" },
    tooltip: {},
    xAxis: { type: "category", data: ["5-1", "5-2", "5-3", "5-4", "5-5"] },
    yAxis: { type: "value" },
    series: [
      {
        data: [30, 42, 35, 50, 47],
        type: "line"
      }
    ]
  });

  const chart4 = echarts.init(chart4Ref.value);
  chart4.setOption({
    title: { text: "异常订单统计", left: "center" },
    tooltip: { trigger: "item" },
    series: [
      {
        name: "订单状态",
        type: "pie",
        radius: ["40%", "70%"],
        data: [
          { value: 20, name: "已取消" },
          { value: 10, name: "超时未入住" },
          { value: 5, name: "未支付" }
        ]
      }
    ]
  });

  // 响应式 resize
  window.addEventListener("resize", () => {
    chart1.resize();
    chart2.resize();
    chart3.resize();
    chart4.resize();
  });
});
</script>

<template>
  <div>
    <h2 style="margin-bottom: 16px">首页数据总览</h2>
    <div
      style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px"
    >
      <div ref="chart1Ref" style="width: 100%; height: 400px" />
      <div ref="chart2Ref" style="width: 100%; height: 400px" />
      <div ref="chart3Ref" style="width: 100%; height: 400px" />
      <div ref="chart4Ref" style="width: 100%; height: 400px" />
    </div>
  </div>
</template>
